<template>
  <div class="todo-list">
    <ul>
      <VueDraggable>
        <li
          v-for="(todo, index) in props.todos"
          :key="todo.id"
          v-show="todo.isShow"
        >
          <el-checkbox v-model="todo.done" />
          <input
            type="text"
            v-model="todo.text"
            :class="todo.done ? 'done' : ''"
            class="todo-text"
            :readonly="todo.done"
          />
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 1024 1024"
            data-v-ea893728=""
            @click="todos.splice(index, 1)"
          >
            <path
              fill="currentColor"
              d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
            ></path>
          </svg>
        </li>
      </VueDraggable>
    </ul>
  </div>
</template>

<script setup>
import { VueDraggable } from 'vue-draggable-plus'
const props = defineProps({
  todos: {
    type: Array,
    required: true,
  },
})
function pause() {
  el.value?.pause()
}

function start() {
  el.value?.start()
}

const onStart = () => {
  console.log('start')
}

const onUpdate = () => {
  console.log('update')
}
</script>

<style scoped>
.todo-list {
  width: 100%;
  max-height: 200px;
  padding: 0;
  overflow: scroll;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: flex;
  height: 30px;
  padding: 10px;
  line-height: 30px;
  border-bottom: 0.5px solid black;
  cursor: move;
}
.todo-text {
  color: black;
  width: 100%;
  border: none;
  background-color: transparent;
  margin: 0 30px;
  padding: 0;
}
.done {
  text-decoration: line-through;
  color: red;
}
svg {
  width: 30px;
  color: red;
  cursor: pointer;
}
</style>
